<template>
  <view>
    <view class="bg-white padding-lr padding-tb-sm solid-bottom text-sm text-grey flex justify-between align-center">
      <view>
        <text class="text-blue">{{ record.author.username }}</text>
        点赞了这个品论
      </view>
      <view>{{String(record.published_at).substring(0,10)}}</view>
    </view>
    <view class="padding bg-white solid-bottom">
      <view class="flex align-center" @click="toUserCenter(record.comment.author.id)">
        <view>
          <image
              mode="widthFix"
              style="width:80upx; flex-shrink: 0; border-radius: 500upx"
              :src="record.comment.author.avatar"></image>
        </view>
        <view class="padding-left">
          <view class="text-bold text-lg">{{ record.comment.author.username }}</view>
          <view class="text-grey">{{ record.comment.author.bio }}</view>
        </view>
      </view>
      <view class="margin-top">{{ record.comment.content }}</view>
    </view>
    <view class="flex align-center justify-between bg-white padding-lr padding-tb-sm text-sm text-grey">
      <view>所属文章
        <text class="text-blue" @click="toArticle(record.comment.article.id)">{{
            String(record.comment.article.title).substring(0, 20)
          }}
        </text>
      </view>
      <view v-if="showDianzan">
        <image v-if="zan && record.author.id===user.id" v-else  @click="unDianzan" src="../../static/icons/dianzan-blue.svg" mode="widthFix" style="width:40upx"></image>
        <image v-else @click="dianzan" src="../../static/icons/dianzan.svg" mode="widthFix" style="width:40upx"></image>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  name: "zanComment",
  props: {
    record: {
      type: Object,
      required: true
    },
    target:{
      type:Object,
      required:false
    },
    showDianzan: {
      type:Boolean,
      default: true,
      required:false,
    }
  },
  data() {
    return {
      zan: true,
    };
  },
  computed: {
    ...mapGetters({
      user: 'user/getUserinfo'
    }),
  },
  methods: {
    unDianzan() {
      this.$api.unDianzanComment(this.record.id).then(res => {
        this.zan = false
        console.log(res)
      })
    },
    dianzan() {
      this.$api.dianzanComment(this.record.id).then(res => {
        this.zan = true
        console.log(res)
      })
    },
    toArticle(id) {
      uni.navigateTo({
        url: '../article/article?id=' + id,
      })
    },
    toUserCenter(id) {
      uni.navigateTo({
        url: "../person/center?id=" + id,
      })
    },
  },
  mounted() {

  }
}
</script>

<style lang="scss">

</style>
